<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">客户基础信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="客户名称">{{
              datas?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="客户编号">
              {{ datas?.no }}
              <img class="icon" src="/public/icons/common/icon-copy.png" alt="" @click="handleCopy(datas.no)" />
            </a-descriptions-item>
            <a-descriptions-item label="客户分类">{{
              classOptions.find((item) => item.value == datas?.customer_type_id)
                ?.text
            }}</a-descriptions-item>
            <a-descriptions-item label="状态">{{
              statusOptions.find(
                (item) => item.value == datas?.customer_status_id
              )?.text
            }}</a-descriptions-item>
            <a-descriptions-item label="所在地区">{{ datas?.zone_name }}</a-descriptions-item>
            <a-descriptions-item label="LOGO">
              <a-image :preview="{
                visible,
                onVisibleChange: setVisible,
              }" :width="28" :src="datas?.logo || 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'" />
              <a-button type="link" size="small" @click="() => setVisible(true)">查看</a-button>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">联系人信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="姓名">{{
              datas?.contacts?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="职务">{{
              datas?.contacts?.duty
            }}</a-descriptions-item>
            <a-descriptions-item label="手机号">
              <span v-if="seePhone">{{ datas?.contacts?.mobile }}</span>
              <span v-else>{{ maskPhone(datas?.contacts?.mobile) }}</span>
              <img class="icon" v-if="!seePhone" src="/public/icons/common/icon-see-close.png" alt=""
                @click="handleChangeSee(1)" />
              <img v-else class="icon" src="/public/icons/common/icon-see-open.png" alt=""
                @click="handleChangeSee(1)" />
            </a-descriptions-item>
            <a-descriptions-item label="联系电话">
              <span v-if="seePhone2">{{ datas?.contacts?.tel }}</span>
              <span v-else>{{ maskPhone(datas?.contacts?.tel) }}</span>
              <img v-if="!seePhone2" class="icon" src="/public/icons/common/icon-see-close.png" alt=""
                @click="handleChangeSee(2)" />
              <img v-else class="icon" src="/public/icons/common/icon-see-open.png" alt=""
                @click="handleChangeSee(2)" />
            </a-descriptions-item>
            <a-descriptions-item label="电子邮箱">{{
              datas?.contacts?.email
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">关联订单</div>
        <div class="column-content">
          <a-descriptions bordered :column="1" :labelStyle="{ width: '120px' }">
            <a-descriptions-item :label="`关联订单${index + 1}`" v-for="(item, index) in orderList" :key="index">
              <div class="detail-text">
                <div class="text-order">
                  订单编号：{{ item.order_id }}
                  <img class="icon" src="/public/icons/common/icon-copy.png" alt=""
                    @click="handleCopy(item?.order_id)" />
                </div>
                <div class="line"></div>
                <div class="text-status">
                  订单状态：
                  <span class="orange">{{orderStatusOptions.find((it) => it.value == item?.order_status_id)?.text
                  }}</span>
                </div>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">经销商信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="经销商">{{
              dealerList.find((item) => item.dealer_id == datas?.dealer_id)?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="销售员">{{
              datas?.sales_name
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { message } from "ant-design-vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import { useRoute } from "vue-router";
import { getCityName } from "@/utils/city.ts";
import { maskPhone } from '@/utils/validate.ts'
const route = useRoute();

const query = computed(() => route.query);
const handleCopy = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    message.success("复制成功");
  } catch (error) {
    message.error("复制失败");
  }
};
const classOptions = ref([]);
const getTypeOptions = async () => {
  const res = await API.CustomerTypeOptions({});
  classOptions.value = res;
};
const zoneoList = ref([]);
const getZoneData = async () => {
  const res = await SAPI.CityCityTree();
  zoneoList.value = res;
};
const statusOptions = ref([]);
const getStatusOptions = async () => {
  const res = await API.CustomerStatusOptions({});
  statusOptions.value = res;
};
const dealerList = ref([]);
const getDealerOptions = async () => {
  const res = await API.DealerOptions({});
  dealerList.value = res;
};
const datas = ref();
const getData = async () => {
  let params = {
    customer_id: query.value.id,
  };
  const res = await API.CustomerFetchModel(params);
  datas.value = res;
  //通过城市id递归找到省市名称
  let list = zoneoList.value;
  datas.value.zone_name = getCityName(list, datas.value.city_id);
};
const orderList = ref([]);
const getOrderData = async () => {
  let params = {
    customer_idArray: [query.value.id],
  };
  const res = await API.OrderContractPagedList({ args: params });
  orderList.value = res?.data;
};
const orderStatusOptions = ref([]);
const getOrderStatusOptions = async () => {
  const res = await API.OrderStatusOptions({});
  orderStatusOptions.value = res;
};
const visible = ref(false);
const setVisible = (value) => {
  visible.value = value;
};
const seePhone = ref(false);
const seePhone2 = ref(false);



const handleChangeSee = (type) => {
  if (type === 1) {
    console.log("手机号");
    seePhone.value = !seePhone.value;
  } else if (type === 2) {
    console.log("联系电话");
    seePhone2.value = !seePhone2.value;
  }
};
onMounted(async () => {
  await getTypeOptions();
  await getZoneData()
  await getStatusOptions();
  await getDealerOptions();
  await getData();
  await getOrderStatusOptions();
  await getOrderData();
});
</script>
